<template>
	<view>
		<view class="comment">
			<text class="comment-1">全部</text>
			<text>有图</text>
			<text>全部</text>
		</view>
		<view class="comment-nb">
			<view class="comment-left">
				<view class="left-top-text">
					<text class="left-left">4.8</text>
					<text>很棒</text>
				</view>
				<view class="left-name">2345条</view>
				<u-rate :count="count" active-color="#00C6C2" :disabled="true" gutter="20" v-model="value"></u-rate>
			</view>
			<view class="comment-right">
				<view class="right-top">
					<text class="text-right">专业</text>
					<u-line-progress :show-percent="false" height="10" active-color="#00C6C2" :percent="80"></u-line-progress>
					<text>4.6</text>
				</view>
				<view class="right-top">
					<text class="text-right">服务</text>
					<u-line-progress :show-percent="false" height="10" active-color="#00C6C2" :percent="80"></u-line-progress>
					<text>4.6</text>
				</view>
				<view class="right-top">
					<text class="text-right">效果</text>
					<u-line-progress :show-percent="false" height="10" active-color="#00C6C2" :percent="80"></u-line-progress>
					<text>4.6</text>
				</view>
				<view class="right-top">
					<text class="text-right">环境</text>
					<u-line-progress :show-percent="false" height="10" active-color="#00C6C2" :percent="80"></u-line-progress>
					<text>4.6</text>
				</view>
			</view>
		</view>
		<view class="comment-cen">
			<view class="comment-cen-top">
				<text class="cen-top-name">技术很好232</text>
				<text>效果满意321</text>
				<text>服务态度2313</text>
				<text>服务态度2313</text>
				<text>服务态度2313</text>
			</view>
			<view class="commod">
				<view class="commod-img">
					<image src="/static/nv.jpg" mode=""></image>
				</view>
				<view class="commod-right">
					<view class="commod-name">
						<text>加菲猫aa</text>
						<text class="commod-name1">2019/12/12</text>
					</view>
					<view class="rate">
						<u-rate :count="count" active-color="#F2CB51" :disabled="true" gutter="6" v-model="value" size="19"></u-rate>
						<text>5.0分</text>
					</view>
					<view class="text-rights">
						让我再看你一遍 从南到北 像是被五环路蒙住的双眼 请你 再讲一遍 关于那天 抱着盒子的姑娘 和擦汗的男人 我sss
					</view>
					<view class="rights-img">
						<image src="/static/nan.jpg" mode=""></image>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				value: 5
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.comment {
		padding: 18rpx 25rpx;
		background-color: #eeeeee;
		display: flex;

		text {
			display: inline-block;
			padding: 14rpx 25rpx;
			background-color: #fff;
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			margin-right: 25rpx;
		}

		.comment-1 {
			color: #00c6c2;
		}
	}

	.comment-nb {
		padding: 30rpx 18rpx;
		display: flex;
		border-bottom: 6rpx solid #E0E0E0;

		.comment-left {
			width: 50%;
			border-right: 1rpx solid #F1F1F1;
			text-align: center;

			.left-top-text {
				padding: 10rpx 0;
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #333333;

				.left-left {
					font-size: 60rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #000000;
				}
			}

			.left-name {
				padding: 10rpx 0;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #5A5A5A;
			}
		}

		.comment-right {
			width: 50%;
			padding: 15rpx 0 0 45rpx;


			.right-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 5rpx 0;

				.text-right {
					font-size: 26rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;
				}

				u-line-progress {
					display: flex;
					// align-items: center;					
					width: 150rpx;
					height: 10rpx;
				}
			}
		}
	}

	.comment-cen {
		// padding:0 25rpx;

		.comment-cen-top {
			padding-top: 40rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			text {
				display: inline-block;
				padding: 11rpx 18rpx;
				border-radius: 45rpx;
				background-color: #EEEEEE;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #282828;
				margin-left: 24rpx;
				margin-bottom: 22rpx;
			}

			.cen-top-name {
				background-color: #00c6c2;
				color: #FFFFFF;
			}
		}

		.commod {
			padding: 20rpx;
			border-bottom: 2rpx solid #E0E0E0;
			display: flex;

			.commod-img {
				width: 20%;

				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
				}
			}

			.commod-right {
				// width: 80%;

				.rights-img {
					width: 100%;
					height: 300rpx;
					border-radius: 4rpx;
					
					image{
						width: 100%;
						height: 100%;
					}
				}

				.text-rights {
					padding: 20rpx 0;
					font-size: 24rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;
				}

				.rate {
					display: flex;
					align-items: center;			
					font-size: 22rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #212121;
				}

				.commod-name {
					padding: 5rpx 0;
					font-size: 24rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;

					text {
						margin-right: 20rpx;
					}

					.commod-name1 {
						font-size: 20rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #8B8B8B;
					}
				}
			}
		}
	}
</style>
